<template>
  <div class="promote-record">
    <div class="app-main-content-box content">
      <!-- 筛选 -->
      <!-- <div class="list-filter app-main-filter-collapse-box">
        <el-collapse>
          <el-collapse-item title="按条件筛选" name="1">
            <div>
              <el-form ref="ruleForm" label-width="120px" size="mini">
                <el-form-item label="筛选类型："></el-form-item>
                <el-form-item size="large">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="submitForm('ruleForm')"
                  >筛选</el-button>
                  <el-button size="mini" icon="el-icon-refresh" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>-->
      <!-- 表格 -->
      <div class="list-table">
        <el-table
          v-loading="tableLoading"
          :data="list"
          border
          stripe
          style="width: 100%"
          empty-text="暂无数据"
        >
          <el-table-column prop="inviteRecord.registerTime" label="会员注册时间" fixed />
          <el-table-column prop="headImg" label="头像" width="50">
            <template slot-scope="scope">
              <div class="table-avatar">
                <img v-if="scope.row.headImg" :src="scope.row.headImg" alt>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="inviteRecord.memberName" label="会员昵称" fixed />
          <el-table-column prop="inviteRecord.categoryName" label="会员卡类型" />
          <el-table-column prop="inviteRecord.inviterName" label="推广人" />
          <el-table-column prop="inviteRecord.inviterPhone" label="推广人手机号" />
          <el-table-column prop="inviteRecord.inviterType" label="推广类型">
            <template slot-scope="scope">
              <span>{{ inviterTypeOption[scope.row.inviteRecord.inviterType] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="inviteWay" label="推广方式">
            <template slot-scope="scope">
              <span>{{ inviteWayOption[scope.row.inviteRecord.inviteWay] }}</span>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getVipInviteRecords } from '@/api/vip'
export default {
  props: {
    tabName: {
      type: String,
      require: true
    }
  },
  data() {
    return {
      inviterTypeOption: ['', '员工', '普通会员'],
      inviteWayOption: ['', '二维码', '小程序分享'],
      list: [], // 表格数据
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      tableLoading: false // 表格loading
    }
  },
  watch: {
    tabName(val) {
      if (val === 'record') {
        this.initData()
      }
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 获取数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      const params = {}
      params.page = page
      params.pageSize = pageSize
      this.tableLoading = true
      getVipInviteRecords(params)
        .then(res => {
          this.tableLoading = false
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch(err => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .content {
    /* 表格 */
    .list-table {
      .el-table {
        margin-bottom: 10px;
      }
      .table-avatar {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border: 1px solid #f7f7f7;
        border-radius: 50%;
      }
    }
  }
</style>
